<template>
    <div class="comment-post">
        <van-field
        class="post-field"
        v-model.trim="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit />

        <van-button class="post-btn" @click="onPost" :disabled="!message.length">发布</van-button>
    </div>
</template>

<script>
import { addComment } from '@/api/comment'

export default {
    name: 'CommentPost',
    inject: ['articleId'],
    props: ['target'],
    data () {
        return {
            message: ''
        }
    },
    methods: {
        async onPost () {
            try {
                const res = await addComment({
                    target: this.target, // 评论的目标id
                    content: this.message,
                    art_id: this.articleId ? this.articleId : null // 对评论进行回复时才需要传递的文章id
                })

                this.message = ''
                this.$emit('postSuccess', res.data.data)
                this.$toast.success('发布成功')
            } catch (error) {
                this.$toast.fail('发布失败')
            }
        }
    }
}
</script>

<style scoped lang="less">
.comment-post {
    display: flex;
    align-items: center;
    padding: 32px 0 32px 32px;
    .post-field {
        background-color: #f5f7f9;
    }
    .post-btn {
        width: 150px;
        border: none;
        padding: 0;
        color: #6ba3d8;
        &::before {
            display: none;
        }
    }
}
</style>
